<template>
  <div>
    <el-row>
      <el-col :span="18">
        <el-row class="scholar">
        <el-row class="basic-info">
          <img class="head-img" alr="" src="../../assets/images/avatar-grey-bg.jpg">
<!--          <el-image src="../../assets/images/avatar-grey-bg.jpg" class="head-img"></el-image>-->
          <el-row class="name-info">
            {{author.name}}
            <span>
            <el-button type="success" @click="passID">绑定</el-button>
            </span>
          </el-row>
          <el-row class="affiliation-info">
            <i class="el-icon-office-building"></i>
            <span v-if="author.org && author.org !== 'null'"> - {{author.org}}</span>
            <span v-else> - 暂无机构信息</span>
          </el-row>
          <el-row class="position-info">
            <i class="el-icon-user"></i>
            <span v-if="author.position && author.position !== 'null'"> - {{author.position}}</span>
            <span v-else> - associate dean</span>
          </el-row>
          <el-row class="area-info" v-show="author.tags.length!==0">
            <i class="el-icon-map-location"></i>
            <span> - </span>
            <span class="area-name" v-for="(area, index) in author.tags" :key="index"  v-show="index<=5">
              <span @click="searchKeyword(area.t)">{{area.t}}</span>
              <span v-if="author.tags.length>index+1"> , </span>
            </span>
          </el-row>
        </el-row>
        </el-row>
      </el-col>
      <el-col :span="6" class="connect-info">
        <el-row class="connect-title">
          <span>相关作者</span>
          <hr>
        </el-row>
        <el-scrollbar class="connect-main">
          <el-row class="friends-item" v-for="(author, index) in relate_authors" :key="index">
            <el-col :span="4">
              <img alr="" v-if="relate_authors[index]" src="../../assets/images/avatar-grey-bg.jpg" style="height: 50px">
<!--              <el-image v-if="relate_authors[index]" :src="author.image" ></el-image>-->
            </el-col>
            <el-col class="related-author" :span="17">
              <el-row class="related-author-name">
                <el-col :span="20" style="padding-bottom: 1px"><span @click="gotoAuthor(author.id)">{{author.name}}</span></el-col>
              </el-row>
              <el-row class="related-author-affiliation">
                <el-tooltip class="item" effect="light" :content="author.org" placement="bottom">
                  <span>{{author.org|ellipsis}}</span>
                </el-tooltip>
              </el-row>
            </el-col>
          </el-row>
        </el-scrollbar>
      </el-col>
    </el-row>
    <el-row class="main-div">
      <el-col class="article-div">
        <el-row class="article-title">
          已发表文献
        </el-row>
        <hr>
        <el-table
            :data="papers.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            height="600px"
            :cell-style = "{borderStyle:'none',padding:'2px 0'}"
            :default-sort = "{prop: 'year', order: 'descending'}"
        >
          <el-table-column
              label="文献"
              min-width="200"
          >
            <template slot-scope="scope">
              <el-row style="font-size: 16px;margin: 2px">
                <span class="article-name" style="color: #217ad9; font-size: 16px;" @click="gotoArticle(scope.row.paper.paper_id)">{{scope.row.paper.title}}</span>
              </el-row>
              <el-row style="color: #999999;font-size: small;padding-left: 2px;margin: 0;border: none">
                    <span v-bind:key="i" v-for="(p,i) in scope.row.authors">
                      {{p}}<span v-if="i !== scope.row.authors.length-1">, </span>
                    </span>
              </el-row>
              <el-row style="color: #999999;font-size: small;padding-left: 2px;margin: 0;border: none">
                <span>{{scope.row.paper.publisher}}</span>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column
              label="被引用次数"
              min-width="50"
              align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.paper.n_citation">
                {{scope.row.paper.n_citation}}
              </span>
              <span v-else>
                0
              </span>
            </template>
          </el-table-column>
          <el-table-column
              prop="paper.lang"
              label="语言"
              min-width="100"
              align="center"
          >

          </el-table-column>
          <el-table-column
              prop="paper.year"
              label="时间"
              min-width="50"
          >

          </el-table-column>
        </el-table>
        <el-pagination align='center'
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[1,5,10,20]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="papers.length">
        </el-pagination>

      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "ScholarPage",
  data(){
    return{
      formpath:'',
      currentPage: 1, //当前页
      pageSize: 10, //每页行数
      total: 0, //列表总行数
      author_id: "",
      author:{
        id:"1",
        name:"Prof Melanie J Calvert",
        h_index:0,
        normalized_name:"author",
        orgs:[""],
        org:"University of Birmingham",
        position:"position",
        n_citation: 0,
        tags:[
          {
            t:"AI",
            w:0,
          },
          {
            t:"Deep Learning",
            w:0,
          },
        ],
        image:"",
      },
      relate_authors:[
        {
          id:"1",
          name:"An-Wen Chan MD",
          h_index:0,
          normalized_name:"author1",
          orgs:[""],
          org:"University of Toronto",
          position:"1",
          pubs:[
            {
              i:"",
              r:0,
            }
          ],
          n_pubs:0,
          n_citation:0,
          tags:[
            {
              t:"",
              w:0,
            }
          ],
          image:"",
        },
        {
          id:"1",
          name:"Xiaoxuan Liu",
          h_index:0,
          normalized_name:"author1",
          orgs:[""],
          org:"University of Birmingham",
          position:"1",
          pubs:[
            {
              i:"",
              r:0,
            }
          ],
          n_pubs:0,
          n_citation:0,
          tags:[
            {
              t:"",
              w:0,
            }
          ],
          image:"",
        },
        {
          id:"1",
          name:"Samantha Cruz Rivera",
          h_index:0,
          normalized_name:"author1",
          orgs:[""],
          org:"University of Birmingham",
          position:"1",
          pubs:[
            {
              i:"",
              r:0,
            }
          ],
          n_pubs:0,
          n_citation:0,
          tags:[
            {
              t:"",
              w:0,
            }
          ],
          image:"",
        },
        {
          id:"1",
          name:"Prof Alastair K Denniston",
          h_index:0,
          normalized_name:"author1",
          orgs:[""],
          org:"University of Birmingham",
          position:"1",
          pubs:[
            {
              i:"",
              r:0,
            }
          ],
          n_pubs:0,
          n_citation:0,
          tags:[
            {
              t:"",
              w:0,
            }
          ],
          image:"",
        },
      ],
      papers:[
        {
          paper: {
            paper_id: "1",
            title: "Deep learning for rare disease: A scoping review",
            author_id: ["1"],
            venue_id: "1",
            keywords: [""],
            year: 2022,
            n_citation: 3421,
            url: [""],
            lang: "English",
            page_start: 0,
            page_end: 0,
            doc_type: "",
            publisher: "Journal of Biomedical Informatics",
            volume: "",
            issue: "",
            issn: "",
            isbn: "",
            doi: "",
            abstract: ""
          },
          authors:["Junghwan Lee","Cong Liu","Chunhua Weng"],
        },
        {
          paper: {
            paper_id: "1",
            title: "AI-Based Clinical Decision Support System for Treatment of Chronic Lymphocytic Leukemia/Small Lymphocytic Lymphoma (CLL/SLL) and Prediction of Treatment Efficiency",
            author_id: ["1"],
            venue_id: "1",
            keywords: [""],
            year: 2022,
            n_citation: 956,
            url: [""],
            lang: "English",
            page_start: 0,
            page_end: 0,
            doc_type: "",
            publisher: "Serenus.AI",
            volume: "",
            issue: "",
            issn: "",
            isbn: "",
            doi: "",
            abstract: ""
          },
          authors:["Herishanu"],
        },
        {
          paper: {
            paper_id: "1",
            title: "Explainable digital forensics AI: Towards mitigating distrust in AI-based digital forensics analysis using interpretable models",
            author_id: ["1"],
            venue_id: "1",
            keywords: [""],
            year: 2022,
            n_citation: 173,
            url: [""],
            lang: "English",
            page_start: 0,
            page_end: 0,
            doc_type: "",
            publisher: "Forensic Science International: Digital Investigation",
            volume: "",
            issue: "",
            issn: "",
            isbn: "",
            doi: "",
            abstract: ""
          },
          authors:["Abiodun A.Solanke"],
        },
        {
          paper: {
            paper_id: "1",
            title: "Guidelines for clinical trial protocols for interventions involving artificial intelligence: the SPIRIT-AI extension",
            author_id: ["1"],
            venue_id: "1",
            keywords: [""],
            year: 2022,
            n_citation: 289,
            url: [""],
            lang: "English",
            page_start: 0,
            page_end: 0,
            doc_type: "",
            publisher: "The Lancet Digital Health",
            volume: "",
            issue: "",
            issn: "",
            isbn: "",
            doi: "",
            abstract: ""
          },
          authors:["SamanthaCruz Rivera","XiaoxuanLiu","An-WenChan","ProfAlastair KDenniston","ProfMelanie JCalvert"],
        },
        {
          paper: {
            paper_id: "1",
            title: "Explainable digital forensics AI: Towards mitigating distrust in AI-based digital forensics analysis using interpretable models",
            author_id: ["1"],
            venue_id: "1",
            keywords: [""],
            year: 2022,
            n_citation: 561,
            url: [""],
            lang: "English",
            page_start: 0,
            page_end: 0,
            doc_type: "",
            publisher: "Forensic Science International: Digital Investigation",
            volume: "",
            issue: "",
            issn: "",
            isbn: "",
            doi: "",
            abstract: ""
          },
          authors:["Abiodun A.Solanke"],
        }
      ],
    }
  },
  beforeRouteEnter(to,from,next){
      next(vm=>{
        // console.log(from,'from')
        vm.fromPath=from.fullPath;
        console.log(vm.fromPath,'frompath')
        next()
      })
      next()
    },
  filters: {
    ellipsis: function(value) {
      if (!value) return "";
      if (value.length > 20) {
        return value.slice(0,20) + "...";
      }
      return value;
    },
  },
  methods:{
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },

    searchKeyword(keyword){
      let routeUrl = this.$router.resolve({
        path: '/searchRes',
        query: { main: keyword }
      });
      window.open(routeUrl .href, "_self");
    },
    gotoAuthor(author_id){
      const that = this
      // alert(author_id)
      const formData ={
        author_id: author_id
      }
      this.$axios({
        method: 'post',
        url:'/paper/judgeAuthorExist/',
        data: JSON.stringify(formData)
      }).then(res =>{
        if(res.data.is_exist){
          let routeUrl = this.$router.resolve({
            path: '/scholar',
            query: { v: author_id }
          });
          window.open(routeUrl .href, "_self");
          this.author_id = this.$route.query.v
          // alert(this.author_id)
          this.getScholarInfo()
          this.getAuthorArticle()
          document.documentElement.scrollTop = 0;
        }
        else{
          this.$message.error("暂无该作者信息！")
        }
      })
    },
    gotoArticle(article_id){
      let routeUrl = this.$router.resolve({
        path: '/article',
        query: { v: article_id }
      });
      window.open(routeUrl .href, "_self");
    },
    getScholarInfo(){
      const that = this
      const formData = {
        author_id: this.author_id
      }
      this.$axios({
        method: 'POST',
        url: '/paper/getScholarInfo/',
        data: JSON.stringify(formData)
      }).then(res=>{
        console.log(res.data.author)
        this.author = res.data.author
        that.getRelatedAuthors()
      })
    },
    getRelatedAuthors(){
      const that = this
      const formData = {
        author_id: this.author_id,
        tags: this.author.tags
      }
      this.$axios({
        method: 'POST',
        url: '/paper/getRelatedAuthors/',
        data: JSON.stringify(formData)
      }).then(res=>{
        that.relate_authors = res.data.authors
      })
    },

    passID(){
      console.log(this.fromPath)
      console.log(this.$route.query.v)
      // console.log("nb1")
      this.$bus.$emit('nowID',this.$route.query.v)
      this.$router.push({ path: this.fromPath });
    },

    getAuthorArticle(){
      const that = this
      const formData ={
        author_id: this.author_id
      }
      this.$axios({
        method: 'POST',
        url: '/paper/getAuthorArticle/',
        data: JSON.stringify(formData)
      }).then(res=>{
        console.log(res)
        this.papers = res.data.papers
      })
    }
  },

  created() {
    // alert("su")
    document.documentElement.scrollTop = 0;
    this.author_id = this.$route.query.v
    // alert("success")
    // alert(this.author_id)
    this.getScholarInfo()
    this.getAuthorArticle()
  }
}
</script>

<style scoped>
.scholar{
  background-color: white;
  margin-right: 20px;
  padding: 20px;
  height: 300px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .04);
}
.connect-info{
  background-color: white;
  margin-right: 0px;
  height: 300px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .04);
}
.connect-title{
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  padding-top: 20px;
}
.connect-main{
  height: 200px;
}

.basic-info{
  text-align: center;
  font-size: 15px;
  font-weight: bold;
}
.name-info{
  font-size: 28px;
}
.head-img{
  border-radius: 50%;
  width: 150px;
  height: 150px;
}
.affiliation-info{
  font-size: 15px;
  font-weight: normal;
  padding-top: 5px;
}
.area-info{
  font-size: 15px;
  font-weight: normal;
  padding-top: 5px;
}
.area-name{
  font-size: 15px;
  color: #00b1fd;
  cursor: pointer;
}
.main-div{
  margin-top: 22px;
  min-height: 620px;
}
.article-div{
  /*text-align: center;*/
  margin-bottom: 10px;
  min-height: 600px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .04)
}
.friends-item{
  padding-bottom: 13px;
  margin-top: 18px;
  border-bottom: #e2e2e2 solid 1px;
  margin-left: 10px;
  margin-right: 10px;
}
.friends-item >>> .el-image{
  height: 45px;
  width: 45px;
  border-radius: 50%;
}
.related-author{
  padding-left: 10px;
}
.related-author-name{
  font-weight: bold;
}
.related-author-name:hover{
  color: #00b1fd;
  cursor: pointer;
}
.connect-main >>> .el-scrollbar__wrap {
  overflow-x: hidden;
}
.article-title{
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-top: 20px;
}
.el-table--border::after, .el-table--group::after, .el-table::before{
  background-color: rgba(41, 56, 69, 0);
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 7px;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb  {
  background-color: rgba(203, 202, 202, 0.66);
  border-radius: 8px;
}
.article-name:hover{
  cursor: pointer;
  text-decoration: underline #217ad9;
}

</style>